<template>
  <div class="couponPanel">
    <transition name="fade">
      <div class="back" v-show="status" @click="status = false"></div>
    </transition>
    <transition name="translate">
      <div class="wrapper" v-show="status">
        <div class="title">
          <p>优惠券<i class="close-icon" @click="status = false"></i></p>
        </div>
        <div class="content">
          <div class="subtitle" v-if="couponEnableData && couponEnableData.length > 0">
            <p>可领优惠券</p>
          </div>
          <div class="item" v-for="(item,index) in couponEnableData" :key="index" v-if="couponEnableData && couponEnableData.length > 0">
            <div class="left">
              <p class="adapt">{{item.coupon_userangedesc}}</p>
              <p class="price"><em>￥</em>{{item.coupon_money}}</p>
              <p class="order">{{item.coupon_orderdesc}}</p>
            </div>
            <div class="right">
              <p class="start">{{item.coupon_usestartdate}}</p>
              <p class="end">{{item.coupon_useenddate}}</p>
              <a class="receive" href="javascript:void(0);" @click="addCouponOrder(item)" v-if="item.coupon_remainnum>0">点击领取</a>
            </div>
          </div>
          <div class="subtitle" v-if="couponDisableData && couponDisableData.length > 0">
            <p>已领优惠券</p>
          </div>
          <div class="item on" v-for="(item,index) in couponDisableData" :key="index" v-if="couponDisableData && couponDisableData.length > 0">
            <div class="left">
              <p class="adapt">{{item.coupon_userangedesc}}</p>
              <p class="price"><em>￥</em>{{item.coupon_money}}</p>
              <p class="order">{{item.coupon_orderdesc}}</p>
            </div>
            <div class="right">
              <p class="start">{{item.coupon_usestartdate}}</p>
              <p class="end">{{item.coupon_useenddate}}</p>
              <a class="receiveOver" href="javascript:void(0);" v-if="item.coupon_remainnum<=0">已领完</a>
            </div>
          </div>
        </div>

      </div>
    </transition>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import {SET_LOADING} from '@store/type'
import { addCouponOrder } from '@api'

export default {
  props: {
    couponData: {
      type: Array
    }
  },
  computed: {
    ...mapState(['token'])
  },
  data: function () {
    return {
      status: false,
      couponEnableData: [],
      couponDisableData: []
    }
  },
  watch: {
    couponData: function () {
      this.splitCoupon()
    }
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    show () {
      this.status = true
    },
    hide () {
      this.status = false
    },
    // 分割优惠券为已领取和待领取
    splitCoupon () {
      this.couponDisableData = []
      this.couponEnableData = []
      this.couponData.map(i => {
        if (i.coupon_remainnum > 0) {
          this.couponEnableData.push(i)
          if ((i.coupon_limitnum - i.coupon_remainnum) > 0) {
            this.couponDisableData.push(i)
          }
        } else {
          this.couponDisableData.push(i)
        }
      })
    },
    // 领取优惠券
    addCouponOrder (item) {
      this.setLoading({
        status: true,
        opacity: 0
      })

      let form = new FormData()
      form.append('coupon_id', item.coupon_id)
      addCouponOrder(form).then(res => {
        this.setLoading(false)
        this.$emit('loadCoupon')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/pub";

  .couponPanel {
    .back {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .wrapper {
      z-index: 3;
      padding: 0 .25rem;
      width: 100%;
      height: 65%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      box-shadow: 0 0 .05rem 0 rgba(8, 1, 3, 0.27);
      .title {
        margin-top: .25rem;
        text-align: center;
        font-size: $default_largefont_size;
        color: $default_title_color;
        .close-icon {
          float: right;
          width: .3rem;
          height: .3rem;
          margin-top: .15rem;
        }
      }

      .content {
        width: 100%;
        height: calc(100% - 1.55rem);
        overflow: hidden;
        overflow-y: auto;
        .subtitle {
          margin-top: .25rem;
          text-align: left;
          font-size: $default_middlefont_size;
          color: $default_subtitle_color;
        }
        .item {
          margin-top: .25rem;
          position: relative;
          overflow: hidden;
          height: 2.5rem;
          background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) .05rem, $default_blue_color .05rem);
          background-size: .15rem .1rem;
          background-position: -.0625rem .125rem;
          &.on {
            background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) .05rem, $default_border_color .05rem);
            &:before {
              background-color:$default_border_color;
            }
          }
          &:before {
            content: '';
            position: absolute;
            top:0;
            bottom:0;
            z-index: -1;
            background-color:$default_blue_color;
            left: .0625rem;
            right: .0625rem;
          }

          i {
            position: absolute;
            left: 20%;
            top: .5625rem;
            height: 2.5rem;
            width: 100%;
            background-color: rgba(255, 255, 255, .15);
            transform: rotate(-30deg);
          }

          .left {
            float: left;
            padding: .25rem;
            width: 60%;
            height: 2.5rem;
            line-height: .55rem;
            border-right: .025rem dashed rgba(255, 255, 255, .3);
            text-align: left;
            p {
              color:#fff;
              font-size: .2375rem;
            }
            .price {
              height: 50%;
              font-size: .75rem;
              line-height: 1rem;
              vertical-align: middle;
              em {
                font-size: .2375rem;
                font-style: normal;
              }
            }
            .order, .adapt {
              height: 25%;
              vertical-align: middle;
            }
          }

          .right {
            display: inline-block;
            width:40%;
            height: 2.5rem;
            vertical-align: text-bottom;
            color:rgb(255,255,255);
            text-align: center;
            line-height: initial;
            padding: .25rem;
            font-size: .3rem;
            p {
              font-size: .2375rem;
              color:#fff;
            }
            .start, .end {
              height: 25%;
              vertical-align: middle;
            }
            .receive {
              background-color:#fff;
              color:#333;
              font-size: .2375rem;
              margin-top: .25rem;
              height: .625rem;
              line-height: .625rem;
              text-decoration:none;

              border-radius: .0375rem;
              display: block;
            }
            .receiveOver {
              color:#fff;
              font-size: .45rem;
              margin-top: .25rem;
              height: .625rem;
              line-height: .625rem;
              text-decoration:none;

              border-radius: .0375rem;
              display: block;
            }
          }
        }
      }
    }
  }

  .translate-enter-active, .translate-leave-active {
    transition: transform .5s
  }

  .translate-enter, .translate-leave-to {
    transform: translate(0, 100%);
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>

